<template>
  <div>
    <!-- v-for: 用于循环渲染结构 -->
    <!-- v-for 写在哪里, 就表示循环渲染哪个标签 -->
    <!-- 
      语法:
        v-for="(循环变量, 索引) in 数据"
      key: 要写一个唯一的值, 暂时写 index, 为了避免报红
      结论: key 如果设置成 index 完全等于没设置, 只是为了避免报红
      正确的设置 key 是将其设置为唯一的字符串或数字, 一般我们开发时设置成 id
     -->
    <ul>
      <li v-for="item in arr" :key="item.id">
        {{ item.name }}
        <input type="text">
      </li>
    </ul>
    <button @click="add">加一个</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // arr: ['老大', '老二', '老三']
      arr: [
        { id: 11, name: '老大' },
        { id: 22, name: '老二' },
        { id: 33, name: '老三' }
      ]
    }
  },
  methods: {
    add() {
      // this.arr.splice(1, 0, '新来的')
      this.arr.splice(1, 0, { id: 44, name: '新来的' })
    }
  }
}
</script>

<style>

</style>